<template>
    <div class="homework-submit">
      <el-form :model="form" label-width="120px" ref="formRef">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="form.studentId"></el-input>
        </el-form-item>
        <el-form-item label="作业标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="作业内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :file-list="fileList"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
    this.$emit('hide-header');
  },
    data() {
      return {
        form: {
          name: '',
          studentId: '',
          title: '',
          content: ''
        },
        fileList: []
      }
    },
    methods: {
      submitForm() {
        // 这里可以添加提交表单的逻辑
        console.log('提交表单:', this.form)
        this.$message.success('提交成功')
      },
      resetForm() {
        this.form = {
          name: '',
          studentId: '',
          title: '',
          content: ''
        }
        this.fileList = []
      },
      handleSuccess(response, file, fileList) {
        this.fileList = fileList
        this.$message.success('上传成功')
      },
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB!')
        }
        return isLt2M
      }
    }
  }
  </script>
  
  <style scoped>
  .homework-submit {
    width: 1300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #ba606032;
  }
  </style>
  